<template>
	<view>
		<image class="my-bg" src="/static/images/my-bg.jpg" mode="widthFix"></image>
		<view class="" style="position: relative">
			<view class="flex" style="padding: 60upx">
				<u-avatar :src="avatarSrc" :size="upx2px(114)"></u-avatar>
				<view class="flex-1" style="padding-left: 33upx;">
					<view class="font-48 font-bold" v-if="!isLogin">
						请登录
					</view>
					<view class="font-48 font-bold" v-if="isLogin">
						{{phoneInfo.purePhoneNumber | formatPhoneNumber}}
					</view>
					<view class="blank10"></view>
					<view class="text-gray" v-if="!isLogin">
						授权手机号后使用点餐服务
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="box">
					<!-- <view class="flex" style="padding: 30upx;">
						<view class="mr15">
							<text class="iconfont icon-gerenziliao font-48"></text>
						</view>
						<view class="flex-1">个人资料</view>
						<text class="iconfont icon-jiantouyou font-26 text-gray"></text>
					</view> -->
					<view class="flex" style="padding: 30upx;" @click="order">
						<view class="mr15">
							<text class="iconfont icon-caozuojilu font-48"></text>
						</view>
						<view class="flex-1 font-36">我的订单</view>
						<text class="iconfont icon-jiantouyou font-26 text-gray"></text>
					</view>
				</view>
			</view>

		</view>
		
		<!-- #ifndef MP-WEIXIN -->
		<view class="logout-box">
			<u-button type="success" size="large" text="模拟授权手机号登录" @click="testLogin"></u-button>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="logout-box" v-if="!isLogin">
			<u-button type="success" size="large" text="授权手机号登录" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button>
		</view>
		<!-- #endif -->
		<!-- <view class="logout-box" v-if="isLogin">
			<u-button type="info" text="退出登录" @click="logout"></u-button>
		</view> -->
		

	</view>
</template>

<script>
	import {
		wxgetuserphonenumber
	} from '@/common/api.js';
	export default {
		components: {


		},
		data() {
			return {
				avatarSrc: '/static/images/login.jpg',
				isLogin: false,
				phoneInfo:{}
			}
		},
		filters: {
			formatPhoneNumber(phoneNumber) {
				return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		},
		methods: {
			// hbuilder上模拟登录
			testLogin(){
				// 模拟登录
				let testPhone = '13430444832'
				let phone_info = {
					phoneNumber:testPhone,
					purePhoneNumber:testPhone
				}
				this.$store.commit('set_phoneInfo',phone_info);
				this.$store.commit('set_phoneInfo',phone_info);
				this.phoneInfo = phone_info;
				this.isLogin = true;
			},
			getPhoneNumber(e) {
				let _this = this
				console.log("getPhoneNumber", e);
				if (e.detail.code) {
					let code = e.detail.code;
					let encryptedData = e.detail.encryptedData;
					let iv = e.detail.iv;
					uni.showLoading({
						title: '加载中'
					});
					wxgetuserphonenumber({
						code
					}).then((res) => {
						let phone_info = res.result.phone_info;
						if(!phone_info.phoneNumber){
							this.$store.dispatch('modal', {
								content: res.result.errmsg || '请求失败',
								showCancel: false
							}).then(() => {
							
							}).catch(() => {
							
							}).finally(() => {
							
							})
						}else{
							this.$store.commit('set_phoneInfo',phone_info);
							this.phoneInfo = phone_info;
							this.isLogin = true;
						}
					}).catch(() => {
						uni.hideLoading();
					}).finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					})
				} else {
					this.$store.dispatch('modal', {
						content: '拒绝授权将无法使用本小程序。',
						showCancel: false
					}).then(() => {

					}).catch(() => {

					}).finally(() => {

					})
				}
			},
			order() {
				if (!this.isLogin) {
					uni.$u.toast('请登录');
					return;
				}
				this.nav('/pages/order/order', 'switchTab');
			},
			// 弃用
			logout() {
				this.$store.dispatch('modal', '确定要退出登录？').then(() => {
					this.$store.dispatch('logout');
					uni.reLaunch({
						url: '/pages/my/my'
					});

				}).catch(() => {

				}).finally(() => {

				})

			},
			getData() {

			}
		},
		onShow() {
			this.getData();
			try{
				this.isLogin = this.$store.getters.get_isLogin;
				this.phoneInfo = this.$store.getters.get_phoneInfo;
			}catch(e){
				
			}
		},
		onLoad(d) {

		},
	}
</script>

<style lang="scss">
	.my-bg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 750upx;
	}

	.logout-box {
		position: fixed;
		bottom: 50px;
		left: 0;
		right: 0;
		padding: 60upx;
	}
</style>